import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import Vue from 'vue';


export const SqlEditor = Vue.extend({
  name: 'JsEditor',
  render: (h) => h('div'),
  props: {
    readOnly: { type: Boolean, default: false },
    fontSize: { type: Number, default: 14 },
    darkTheme: { type: Boolean, default: false },
  },
  mounted() {
    const $editor = monaco.editor.create(this.$el, { language: 'javascript' });
    this.$watch(() => {
      const { fontSize, readOnly, darkTheme } = this;
      /** 
       * @typedef {@import('monaco-editor')} monaco
       * @type {monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions} 
       */
      const opts = {
        fontSize,
        theme: darkTheme ? 'vs-dark' : 'vs',
        readOnly
      };
      return opts;
    }, opts => $editor.updateOptions(opts));
  }
})